<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户关联角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.5.5/css/layui.css}"
          href="../../../static/layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" href="../../../static/layuimini/css/public.css"
          media="all">
    <style>
        body {
            background-color: #fff;
            padding: 0;
            margin: 0;
        }

        body .layui-layer-btn {
            background-color: #F8F8F8;
            border-top: 1px solid #eee;
            padding-top: 10px;
        }

        /*body .layui-table-box{
            height: 428px;
        }*/
        body .layui-form.layui-border-box.layui-table-view {
            height: 460px;
        }
    </style>
</head>
<body>

<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

<script type="text/html" id="currentTableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
<div class="layui-layer-btn layui-layer-btn-">
    <a id="btn_add_role" class="layui-layer-btn0" lay-filter="btn_add_role" lay-submit>添加角色</a>
    <!--    <a id="btn_remove_role" class="layui-layer-btn0" lay-filter="btn_remove_role" lay-submit>添加角色</a>-->
    <a id="edit_cancel" class="layui-layer-btn1">关闭</a>
</div>

<script th:src="@{/layuimini/lib/layui-v2.5.5/layui.js}" src="../../../static/layuimini/lib/layui-v2.5.5/layui.js"
        charset="utf-8"></script>
<script>
    layui.use(['table'], function () {
        var $ = layui.jquery,

            table = layui.table;

        var roleTable = table.render({
            elem: '#currentTableId',
            url: '[[@{/}]]manage/role/list?userId=[[${param.userId}]]&idEq=true',
            cols: [
                [
                    {type: "checkbox", minWidth: 50},
                    {field: 'roleId', minWidth: 80, title: 'ID'},
                    {field: 'roleName', minWidth: 120, title: '角色名称'},
                    {
                        title: '操作', minWidth: 120, align: "center", templet: function () {
                            return '<button class="layui-btn layui-btn-xs layui-btn-danger layui-btn-radius" lay-event="remove"><i class="layui-icon">&#xe640;</i>移除</button>';
                        }
                    },
                ]
            ],
            limits: [10],
            // limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'line'
        });


        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj);
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'remove') {
                layer.confirm('真的要移除该角色么', function (index) {
                    $.ajax({
                        type: 'get',
                        url: '[[@{/}]]manage/role/remove',
                        data: {userId: [[${param.userId}]], roleId: data.roleId},
                        dataType: 'json',
                        success: function (result) {
                            console.log(result);
                            if (result.success) {
                                layer.msg("操作成功");
                                obj.del();
                            } else {
                                layer.msg(result.msg);
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            layer.msg(textStatus);
                        },
                        complete: function () {
                            layer.closeAll('loading');
                        }
                    });

                    layer.close(index);
                });
            }
        });

        //选取角色
        $('#btn_add_role').click(function () {
            parent.layer.open({
                type: 2
                , title: '用户添加角色 [id:[[${param.userId}]]]'
                , content: '[[@{/}]]manage/user/user-role-select.html?userId=[[${param.userId}]]'
                , resize: false
                , area: ['530px', '649px']
                , maxmin: false
                , scrollbar: false
                , shadeClose: false
                , end: function () {
                    location.reload();
                }
            });
        });

        //取消
        $('#edit_cancel').click(function cancel() {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        });

    });
</script>

</body>
</html>